import { observer } from 'mobx-react-lite';
import { Table, Input  } from 'antd';
import {useEffect,useState} from 'react'
import {getSkillLabel,getinterviewList} from '@/services'
import { ISkillLabel,interviewListQuery,interRecord} from '@/utils/interface';
import { SearchOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import {NavLink } from 'umi';
import './interviewList.less'
import styles from './interviewList.less'
// const status=['全部','通过','未通过','不确定']
let status=[
    {
        title:'全部',
        type:''
    },
    {
        title:'通过',
        type:1
    },
    {
        title:'未通过',
        type:2
    },
    {
        title:'不确定',
        type:0
    },
]
const soundrecordList=['无','有']
const columns=[
    {
        title: '岗位名称',
        render:(row:interRecord)=>
        <NavLink to={`/teachers/interviewRecord?interviewId=${row.interviewId}&shield=${row.shield}&see=true`}>
            <span>{row.stationName}</span>
            </NavLink>
    },
    {
        title: '公司名称',
        dataIndex: 'companyName',
    },
    {
        title: '面试时间',
        dataIndex: 'interviewTime',
    },
    {
        title: '面试官',
        dataIndex: 'intervierManagement',
    },
    {
        title: '专业',
        dataIndex: 'majorName',
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
    },
    {
        title: '面试结果',
        render : (row:ISkillLabel)=> <span>{status[Number(row.status)].type==0 ? '不确定' :status[Number(row.status)].title}</span>
    },
    {
        title: '录音文件',
        render : (row:ISkillLabel)=> <span>{soundrecordList[Number(row.issoundrecord)]}</span>
    },
]

const interviewList:React.FC=()=>{

    let [interviewList,setinterviewList]=useState<ISkillLabel[]>([])
    let [curStatus, setCurStatus] = useState(0);
    let [ curSkill , setCurSkill ] = useState('')
    let [dataSource, setDataSource] = useState<ISkillLabel[]>([]);
    let [ searchTitle , SetSearchTitle] = useState('');
    let [title, setTitle] = useState('');
    useEffect(() => {
        getSkillLabel().then(res=>{
            if(res.code==200){
                setinterviewList(res.data)
            }
        })
    }, [])
    useEffect(() => {
        let queryParams : interviewListQuery = {} as  interviewListQuery;
        if(curStatus){
            queryParams = { ...queryParams ,searchTitle, majorId : curSkill , status : curStatus }
        }
        else
        {
            queryParams = { ...queryParams , searchTitle,majorId : curSkill , status : '' as unknown as number }
        }
        getinterviewList(queryParams).then(res => {
            if (res.code == 200) {
                console.log(res)
                setDataSource(res.rows);
            }
        })
    }, [curSkill , curStatus ,searchTitle ])
    return <div className='interviewList'>
   <section>
        <section>
            <span className={styles.major}>专业</span>
                <ul  className='profession'>
                    {
                        [{ id:'', name: '全部' }, ...interviewList].map(item=>{
                            return <span className={item.id === curSkill ? classNames(styles.span, styles.active) : styles.span} 
                            onClick={e => setCurSkill(item.id)} key={item.id}>{item.name}</span>
                        })
                    }
                </ul>
        </section>
    <section>
            <span className={styles.major}>状态：</span>
                <ul className='state'>{
                    status.map((item, index) => {
                        return <span className={index === curStatus ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurStatus(index)} key={index}>{item.title}</span>
                    })
                }</ul>
        </section>
    </section>
        <div className='Form'>
            <Input placeholder="搜索岗位/公司名称" className={styles.search}  suffix={<SearchOutlined onClick={()=>{ SetSearchTitle(title)}}/>} value={title} onChange={e=>setTitle(e.target.value)} onKeyDown={e=>{
                if(e.keyCode === 13)
                {
                    SetSearchTitle(title)
                }
            }}/>
        </div>
        <Table rowKey="interviewId" dataSource={dataSource} columns={columns}></Table>
  </div>
}
export default observer(interviewList)